<!--
  ~ Electronic Logistics Management Information System (eLMIS) is a supply chain management system for health commodities in a developing country setting.
  ~
  ~ Copyright (C) 2015  John Snow, Inc (JSI). This program was produced for the U.S. Agency for International Development (USAID). It was prepared under the USAID | DELIVER PROJECT, Task Order 4.
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->

<div class="row-fluid sortable ui-sortable">
  <div class="box span12">
    <div class="box-header">
      <h2>
        <i class="icon-edit"></i>
        <span class="break"></span>
        Reports
      </h2>
    </div>
    <div filter-container>
      <form ng-submit="filterGrid()" name="filterForm" novalidate>
        <div class="app-form">
          <select ui-select2 style="width: 450px;" ng-change="OnFilterChanged()" ng-model="filter.report_key">
            <option></option>
            <optgroup label="{{cat}}" ng-repeat="cat in categories">
              <option value="{{r.reportkey}}" ng-selected="r.reportkey == filter.report_key"
                      ng-repeat="r in  displayReports[cat]">
                {{$index + 1}} - {{r.name}}
              </option>
            </optgroup>
          </select>

          <div class="clearfix"></div>

          <div class="row-fluid">
            <div class="sidebar" ng-if="report.currentFilters.length > 0">
              <div class="">
                <div ng-repeat="fltr in report.currentFilters">
                  <div class="row-fluid">
                    <program-filter ng-if="fltr.name == 'program'"
                                    required="true"
                                    class="form-cell horizontalFilters">
                    </program-filter>
                    <year-filter ng-if="fltr.name == 'year'"
                                 required="true"
                                 class="form-cell horizontalFilters">
                    </year-filter>
                    <quarter-filter ng-if="fltr.name == 'quarter'"
                                    required="true"
                                    class="form-cell horizontalFilters">
                    </quarter-filter>
                    <schedule-filter ng-if="fltr.name == 'schedule'"
                                     required="true"
                                     class="form-cell horizontalFilters">
                    </schedule-filter>

                    <period-filter ng-if="fltr.name == 'period'"
                                   required="true"
                                   class="form-cell horizontalFilters">
                    </period-filter>
                    <zone-filter ng-if="fltr.name == 'zone'"
                                 required="true"
                                 class="form-cell horizontalFilters">
                    </zone-filter>
                    <facility-type-filter ng-if="fltr.name == 'facility-type'"
                                          class="form-cell horizontalFilters"
                                          required="true">
                    </facility-type-filter>
                    <facility-filter ng-if="fltr.name == 'facility'"
                                     class="form-cell horizontalFilters"
                                     required="true">
                    </facility-filter>

                    <product-category-filter ng-if="fltr.name == 'product-category'"
                                             class="form-cell horizontalFilters"
                                             required="true">
                    </product-category-filter>

                    <product-filter ng-if="fltr.name == 'product'"
                                    required="true"
                                    class="form-cell horizontalFilters">
                    </product-filter>
                  </div>
                  <div class="clearfix"></div>
                </div>
              </div>


            </div>
            <div class="float-right" ng-class="{'content-body': report.currentFilters.length > 0}">
              <div class="box" style="padding-top: 0px;margin-top:0px; ">

                <div class="box-content" style="min-height: 400px;">
                  <h4>
                    {{report.name}}
                    <a class="pull-right btn btn-small btn-primary" ng-show="data.length > 0" href="" ng-click="exportCSV();">Export CSV</a>
                  </h4>
                  <hr/>
                  <table ng-show="data.length == 0">
                    <tr>
                      <td>No data to show under selected filters</td>
                    </tr>
                  </table>
                  <div client-side-sort-pagination ng-show="data.length > 0">
                    <span ng-show="meta" style="padding-right: 5px; font-size: 9px" class="pull-right">
                      As of <strong>{{ meta.date | date : 'hh:mm a dd-MMM-yyyy' }}</strong>
                    </span>

                    <table ng-table="tableParams" class="table-bordered table table-striped ng-table">
                      <thead>
                      <tr>
                        <th class="header">#</th>
                        <th ng-repeat="col in report.columns" class="header {{col.formatting}}">{{col.displayName}}</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr ng-repeat="row in data">
                        <td style="width: 20px; max-width: 30px" ng-bind="($index + 1)"></td>
                        <td class="span{{col.width}} {{col.formatting}} {{col.formatting == 'percent'? 'number': ''}}"
                            ng-repeat="col in report.columns">
                          <span ng-show="col.formatting != 'number' && col.formatting != 'percent'">{{row[col.name]}}</span>
                          <span ng-show="col.formatting == 'number'">{{row[col.name] | number}}</span>
                          <span ng-show="col.formatting == 'percent'">{{row[col.name] | number}} %</span>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>

            </div>
          </div>
          <div class="clearfix"></div>
        </div>
      </form>
    </div>
  </div>
</div>
